<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding:20px;">
    <div  class="form-inline">
        <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">增加</button>
        <button id="delete" class="btn btn-primary">删除</button>
        <button id="update" class="btn btn-primary">编辑</button>
        <button id="query" class="btn btn-primary">查询</button>

        <input id="queryid" type="text" class="form-control" placeholder="按工号查询">
        <input id="queryname" type="text" class="form-control" placeholder="按姓名查询">

    </div>
    <table class="table table-responsive table-striped">
        <!-- 表格内容的描述 -->
        <caption>
            用户信息操作界面
        </caption>
        <!-- 标题行容器元素 -->
        <thead>
            <tr>
                <!-- th居中加粗的效果，在thead中使用 -->
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <!-- 表格行的容器元素 -->
        <tbody>
            <tr>
                <td>
                    <input id="box" type="checkbox">
                </td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>27</td>
                <td>1993-3-3</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>26</td>
                <td>1994-4-4</td>
            </tr>
        </tbody>
    </table>
    
    <!-- 声明定义模态框组件 -->
	<div class="modal" id="myModal" data-backdrop="static">
		<!-- 窗口声明 -->
		<div class="modal-dialog">
			<!-- 内容声明 -->
			<div class="modal-content">
					
				<!-- 框的标题 -->
				<div class="modal-header">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button> 
					<h4 class="modal-title">
						添加用户信息
					</h4>
				</div>
			
				<!-- 框内信息 -->
				<div class="modal-body">
                    <label class="form-inline" >工号 :
                        <input id="userid" type="text" class="form-control" placeholder="请输入工号">
                    </label>
                    <label class="form-inline" >姓名 :
                        <input id="username" type="text" class="form-control" placeholder="请输入姓名">
                    </label>
                    <label class="form-inline" >性别 :
                        <input id="usersex" type="text" class="form-control" placeholder="请输入性别">
                    </label>
                    <label class="form-inline" >密码 :
                        <input id="password" type="text" class="form-control" placeholder="请输入密码">
                    </label>
                    <label class="form-inline" >年龄 :
                        <input id="userage" type="text" class="form-control" placeholder="请输入年龄">
                    </label>
                    <label class="form-inline" >出生日期 :
                        <input id="birthday" type="text" class="form-control" placeholder="请输入出生日期">
                    </label>
				</div>
						
				<!-- 框的按钮 -->
				<div class="modal-footer">
					<button id="add" class="btn btn-info" data-dismiss="modal">确定</button>
					<button class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="./userCRUD.js"></script>

</body>
</html>